<template>
	<section class="job-container">
    <div class="img-box"></div>
    <div class="job-holder">
      <div class="job-overview">
        <div class="overview__title">
          <div class="overview__title--holder">
            <div class="overview__title--box">
              <h4>招聘职位</h4>
              <div class="line"></div>
            </div>
          </div>
        </div>

        <div class="overview__content">
          <ul>
            <li v-for="job in jobList" @click="goToJobDetail(job)" :class="{'selected': selectedJobKey === job.key}">{{job.val}}</li>
          </ul>
        </div>
      </div>
    </div>
    <nuxt-child />
  </section>
</template>

<script>
	export default {
    layout: 'layout',
    data () {
      return {
        jobList: [
          {key: 'ui', val: '设计师'},
          {key: 'graphic', val: '平面设计师'},
          {key: 'font-end', val: '前端工程师'},
          {key: 'android', val: 'android工程师'},
          {key: 'ios', val: 'IOS工程师'},
          {key: 'manager', val: '大区经理'},
          {key: 'driver', val: '货车司机'},
          {key: 'sales', val: '销售内勤'}
        ],
        selectedJobKey: ''
      }
    },
    watch:{
      $route(to, from) {
        this.selectedJobKey = to.params.name;
        localStorage.setItem("job-key", this.selectedJobKey)
      }
    },
    mounted() {
      this.selectedJobKey = this.$route.params.name || '';
      localStorage.setItem("job-key", this.selectedJobKey)
    },
    methods: {
      goToJobDetail (job) {
        this.selectedJobKey = job.key;
        localStorage.setItem("job-key", this.selectedJobKey)
        this.$router.push('/job/' + job.key)
      }
    }
	}
</script>

<style lang="scss" scoped>
.job-container {
  .img-box {
    height: 500px;
    background: url("../assets/img/job/banner.png") no-repeat center 90%;
    background-size: cover;
  }
  .job-holder {
    width: 1200px;
    margin: 0 auto;
    .job-overview {
      padding: 0 10px;
      .overview__title {
        overflow: hidden;
        .overview__title--holder {
          float: left;
          position: relative;
          left: 50%;
          clear: both;
          .overview__title--box {
            position: relative;
            left: -50%;
            padding: 43px 0;
            h4 {
              font-size: 30px;
              line-height: 30px;
              color: #010101;
              font-weight: normal;
              letter-spacing: 2px;
            }
            .line {
              margin-top: 6px;
              margin-left: 2px;
              width: 64px;
              height: 2px;
              background-color: #FF8A01;
            }
          }
        }
      }

      .overview__content {
        background-color: rgb(255, 255, 255);
        box-shadow: 0 0 5px rgba(255, 138, 1, 0.14);
        ul {
          font-size: 0;
          padding-top: 32px;
          li {
            display: inline-block;
            width: 250px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            color: #000000;
            font-weight: 500;
            border-radius: 10px;
            background-color: rgb(235, 235, 235);
            margin-left: 37px;
            margin-bottom: 32px;
            cursor: pointer;
            &.selected {
              background-color: #FF8A01;
              color: #ffffff;
            }
          }
        }
      }
    }
  }

}
</style>
